<template>
	<view>
		<view class="flex justify-between margin-sm">
			<view class="cuIcon-refresh text-gray text-lg" @tap="listLinkageSetting()">
				<text class="margin-left-xs">{{$t('setting')}}</text>
			</view>
			<view class="flex margin-right">
				<view class="cuIcon-add" :style="{color : themeConfig.primaryColor}" @tap="showAdd">
					{{$t('add')}}
				</view>
				<view class="cuIcon-check margin-left-sm"
					:style="{color : haveChange?themeConfig.primaryColor:'#aaaaaa'}" @tap="save">
					{{$t('save')}}
				</view>
			</view>
		</view>
		<view v-for="(linkageSetting,index) in linkageSettingList" :key="index"
			style="height: 80px;"
			class="bg-white padding-sm margin-sm flex justify-between align-center common-box" @tap="edit(linkageSetting)">
			<view class=" flex align-center">
				<image :src="linkageSetting.iconUrl" style="width: 20px;height: 20px;" class="margin-sm"></image>
				<view>
					<view class="text-lg">
						<text
							class="text-bold margin-right-sm">{{formatSensorType(linkageSetting.sensorType)}}{{$t('port')}}:{{linkageSetting.port}}</text>
						<text v-if="linkageSetting.sensorName">[ {{linkageSetting.sensorName}} ]</text>
					</view>
					<view class="text-gray margin-top-xs text-sm">
						<text>{{ linkageSetting.name }}</text>
						<text class="margin-left-xs">{{linkageSetting.valueText}}</text>
					</view>
				</view>
			</view>

			<view  class="flex">
				<view class="cuIcon-delete text-pink margin-right-sm" @tap.stop="deleteItem(index)"></view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="editDialog?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-gray" @tap="editDialog = false">{{$t('cancel')}}</view>
					<view class="action" :style="{color : themeConfig.primaryColor}" @tap="editSave">{{$t('confirm')}}
					</view>
				</view>
				<view>
					<form>
						<view class="cu-form-group">
							<view class="title">{{$t('setting')}}</view>
							<picker mode="multiSelector" @columnchange="settingMultiColumnChange"
								@change="settingMultiChange" :value="settingMultiIndex" :range="settingMultiArray">
								<text class="text-sm">{{settingMultiArray[0][settingMultiIndex[0]]}},{{settingMultiArray[1][settingMultiIndex[1]]}}</text>
							</picker>
						</view>
						<view class="cu-form-group">
							<view class="title">{{$t('value')}}</view>
							<view v-if="setting.type==='fixedParam'">
								<!-- 固定参数 -->
								<view class="flex justify-end flex-wrap">
									<button v-for="(param,paramIndex) in setting.paramList" :key="paramIndex"
										@tap="linkageSetting.rawValue = param.rawValue" :disabled="setting.disabled"
										class="margin-top-xs margin-left-sm margin-bottom-sm cu-btn block" size="mini"
										:class="[linkageSetting.rawValue == param.rawValue ? 'selectButton' : 'noSelectButton']"
										:style="{'--color': themeConfig.primaryColor}">{{param.name + setting.unit}}</button>
								</view>
							</view>
							<view v-else-if="setting.type==='switch'">
								<!-- 开关量 -->
								<switch :class="themeConfig.theme" class="sm radius"
									@change="linkageSettingValueSwitchChange" :disabled="setting.disabled"
									:checked="linkageSetting.rawValue === '1'">
								</switch>
							</view>
							<view v-else-if="setting.type==='time'">
								<picker :disabled="setting.disabled" mode="time" :value="linkageSetting.rawValue"
									@change="linkageSettingValueTimeChange">
									<text class="text-sm">{{linkageSetting.rawValue}}</text>
								</picker>
							</view>
							<view
								v-else-if="setting.type==='timeSlot' || setting.type==='noParam' || setting.type==='multiCustom'">
							</view>
							<view v-else-if="setting.type==='slider'">
								<!-- 拖动条 -->
								<slider style="width: 180px;" :disabled="setting.disabled" show-value max="100" min="0"
									step="1" :value="parseInt(linkageSetting.rawValue)"
									:activeColor="themeConfig.primaryColor" block-size="20"
									@change="linkageSettingValueSliderChange">
								</slider>
							</view>
							<view v-else>
								<!-- 其他 -->
								<input type='text' v-model="linkageSetting.rawValue" />
							</view>
						</view>
						<view class="cu-form-group" v-if="setting.type !=='noParam'">
							<view class="title">{{$t('auto')+$t('reset')}}</view>
							<switch :class="themeConfig.theme" class="sm radius" @change="autoResetChange"
								:checked="linkageSetting.autoReset">
							</switch>
						</view>
						<view class="cu-form-group" v-if="linkageSetting.autoReset">
							<view class="title"></view>
							<view v-if="setting.type==='fixedParam'">
								<!-- 固定参数 -->
								<view class="flex justify-end flex-wrap">
									<button v-for="(param,paramIndex) in setting.paramList" :key="paramIndex"
										@tap="linkageSetting.resetValue = param.rawValue" :disabled="setting.disabled"
										class="margin-top-xs margin-left-sm margin-bottom-sm cu-btn block" size="mini"
										:class="[linkageSetting.resetValue == param.rawValue ? 'selectButton' : 'noSelectButton']"
										:style="{'--color': themeConfig.primaryColor}">{{param.name + setting.unit}}</button>
								</view>
							</view>
							<view v-else-if="setting.type==='switch'">
								<!-- 开关量 -->
								<switch :class="themeConfig.theme" class="sm radius"
									@change="linkageSettingResetValueSwitchChange" :disabled="setting.disabled"
									:checked="linkageSetting.resetValue === '1'">
								</switch>
							</view>
							<view v-else-if="setting.type==='time'">
								<picker :disabled="setting.disabled" mode="time" :value="linkageSetting.resetValue"
									@change="linkageSettingResetValueTimeChange">
									<text class="text-sm" v-if="linkageSetting.resetValue">{{linkageSetting.resetValue}}</text>
									<text class="text-sm" v-else>00:00</text>
								</picker>
							</view>
							<view
								v-else-if="setting.type==='timeSlot' || setting.type==='noParam' || item.type==='multiCustom'">
							</view>
							<view v-else-if="setting.type==='slider'">
								<!-- 拖动条 -->
								<slider style="width: 180px;" :disabled="setting.disabled" show-value max="100" min="0"
									step="1" :value="linkageSetting.resetValue" :activeColor="themeConfig.primaryColor"
									block-size="20" @change="linkageSettingResetValueSliderChange">
								</slider>
							</view>
							<view v-else>
								<!-- 其他 -->
								<input type='text' v-model="linkageSetting.resetValue" />
							</view>
						</view>
					</form>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatPhoneStatus,
		formatSetting
	} from '@/util/utils.js'
	import *
	as deviceSensorApi from '@/api/iot/iotDeviceSensorApi.js'
	import *
	as deviceLinkageSettingApi from '@/api/iot/iotDeviceLinkageSettingApi.js'
	import {
		formatSensorType
	} from '@/util/dataUtil.js'
	export default {
		name: 'LinkageSetting',
		props: {
			linkage: {
				type: Object,
				default: null
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		// watch: {
		// 	linkage: {
		// 		deep: true,
		// 		handler() {
		// 			this.listLinkageSetting()
		// 		}
		// 	}
		// },
		data() {
			return {
				linkageSetting: {},
				linkageSettingList: [],
				sensorList: [],
				editDialog: false,
				settingMultiIndex: [0, 0],
				settingMultiArray: [],
				isEdit: false,
				haveChange: false,
				setting: {}
			}
		},
		created() {
			this.listSensorWithSetting()
		},
		methods: {
			formatSensorType(type) {
				return formatSensorType(this, type)
			},
			linkageSettingValueSwitchChange(e) {
				e.detail.value ? this.linkageSetting.rawValue = 1 : this.linkageSetting.rawValue = 0
			},
			linkageSettingValueTimeChange(e) {
				this.linkageSetting.rawValue = e.detail.value
			},
			linkageSettingValueSliderChange(e) {
				this.linkageSetting.rawValue = e.detail.value
			},
			linkageSettingResetValueSwitchChange(e) {
				e.detail.value ? this.linkageSetting.resetValue = 1 : this.linkageSetting.resetValue = 0
			},
			linkageSettingResetValueTimeChange(e) {
				this.linkageSetting.resetValue = e.detail.value
			},
			linkageSettingResetValueSliderChange(e) {
				this.linkageSetting.resetValue = e.detail.value
			},
			autoResetChange(e) {
				this.linkageSetting.autoReset = e.detail.value
			},
			sensorChange(i) {
				const settingList = []
				const sensor = this.sensorList[i]
				if (sensor.settingList) {
					for (const setting of sensor.settingList) {
						settingList.push(setting.name)
					}
				}
				this.settingMultiArray.splice(1, 1, settingList)
				this.settingChange()
			},
			settingChange() {
				this.setting = formatSetting(this.sensorList[this.settingMultiIndex[0]]
					.settingList[this.settingMultiIndex[1]])
				this.linkageSetting.rawValue = this.setting.rawValue
				this.linkageSetting.resetValue = this.setting.rawValue
			},
			settingMultiChange(e) {
				this.settingMultiIndex = e.detail.value
				this.settingChange()
			},
			settingMultiColumnChange(e) {
				if (e.detail.column === 0) {
					this.sensorChange(e.detail.value)
				}
			},
			showAdd() {
				this.linkageSetting = {
					port: '',
					keyName: '',
					value: '',
					rawValue: '',
					autoReset: false,
					resetValue: '',
					settingId: 'a' + this.linkageSettingList.length
				}

				this.settingMultiIndex = [0, 0]
				this.sensorChange(0)
				this.editDialog = true
				this.isEdit = false
			},
			edit(item) {
				const settingList = []
				for (const i in this.sensorList) {
					const sensor = this.sensorList[i]
					if (item.port === sensor.port) {
						for (const setting of sensor.settingList) {
							settingList.push(setting.name)
						}
						this.settingMultiArray[1] = settingList
						for (const j in sensor.settingList) {
							const setting = sensor.settingList[j]
							if (setting.keyName === item.keyName) {
								this.setting = formatSetting(setting)
								this.settingMultiIndex = [i, j]
								break
							}
						}
						break
					}
				}
				this.linkageSetting = item
				this.editDialog = true
				this.isEdit = true
			},
			editSave() {
				const sensor = this.sensorList[this.settingMultiIndex[0]]
				this.linkageSetting.port = sensor.port
				this.linkageSetting.keyName = sensor.settingList[this.settingMultiIndex[1]].keyName

				if (this.isEdit) {
					for (const i in this.linkageSettingList) {
						const linkageSetting = this.linkageSettingList[i]
						if (linkageSetting.settingId === this.linkageSetting.settingId) {
							this.linkageSettingList.splice(i, 1, this.formatterLinkageSetting(this.linkageSetting))
							break
						}
					}
				} else {
					this.linkageSettingList.push(this.formatterLinkageSetting(this.linkageSetting))
				}
				this.editDialog = false
				this.haveChange = true
			},
			save() {
				if (this.linkage.type === 'device') {
					deviceLinkageSettingApi.insertOrUpdateLinkageSettingToDevice({
						linkageId: this.linkage.linkageId,
						settingList: this.linkageSettingList
					}).then(res => {
						const {
							data
						} = res
						this.haveChange = false
						this.listLinkageSetting()
					})
				} else if (this.linkage.type === 'server') {
					deviceLinkageSettingApi.insertOrUpdateLinkageSettingToServer({
						linkageId: this.linkage.linkageId,
						settingList: this.linkageSettingList
					}).then(res => {
						const {
							data
						} = res
						this.haveChange = false
						this.listLinkageSetting()
					})
				} else {
					showToast(this.$t('failure'), 'none', 1000, false) //操作失败
				}
			},
			deleteItem(index) {
				this.linkageSettingList.splice(index, 1)
				this.haveChange = true
			},
			listLinkageSetting() {
				deviceLinkageSettingApi.listLinkageSetting({
					linkageId: this.linkage.linkageId
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						const linkageSettingList = []
						for (const linkageSetting of data) {
							linkageSettingList.push(this.formatterLinkageSetting(linkageSetting))
						}
						this.linkageSettingList = linkageSettingList
					}
				})
			},
			formatterLinkageSetting(linkageSetting) {
				for (const sensor of this.sensorList) {
					if (sensor.port === linkageSetting.port) {
						for (const setting of sensor.settingList) {
							if (setting.keyName === linkageSetting.keyName) {
								linkageSetting.name = setting.name
								linkageSetting.iconUrl = setting.iconUrl
								linkageSetting.valueText = linkageSetting.rawValue
								linkageSetting.sensorName = sensor.sensorName
								linkageSetting.sensorType = sensor.type
								if (setting.type === 'fixedParam' && setting.paramList) {
									for (const param of setting.paramList) {
										if (param.rawValue === linkageSetting.rawValue) {
											linkageSetting.valueText = param.name
										}
									}
								} else if (setting.type === 'switch') {
									if (linkageSetting.rawValue === '1') {
										linkageSetting.valueText = this.$t('open')
									} else {
										linkageSetting.valueText = this.$t('close')
									}
								}
								return linkageSetting
							}
						}
					}
				}
				return linkageSetting
			},
			listSensorWithSetting() {
				deviceSensorApi.listSensorWith({
					deviceId: this.linkage.deviceId,
					withSetting: true
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						const sensorList = []
						const sensorNameList = []
						for (const sensor of data) {
							if (sensor.settingList && sensor.settingList.length > 0) {
								sensorNameList.push(this.formatSensorType(sensor.type) + this.$t('port') + ':' +
									sensor.port + ' ' + sensor.sensorName)
								sensorList.push(sensor)
							}
						}
						this.settingMultiArray[0] = sensorNameList
						this.sensorList = sensorList
						this.sensorChange(0)
					} else {
						this.sensorList = []
					}
					this.listLinkageSetting()
				})
			},
		}
	}
</script>
<style scoped>
	.setting-border{
		border-radius:6px;
		border: 1px solid rgba(135, 153, 163, 0.5);
	}
	.selectButton {
		color: #fff;
		background-color: var(--color)
	}

	.noSelectButton {
		color: #8799a3;
		background-color: #efefef
	}
</style>
